<html>
    <head>
        <meta charset='utf-8'>
        <title>index</title>
    </head>
    <body>
        <h1>HELLO WORLD</h1>
        <p>第一段</p>
        <style>
            p{
                color:blue;
            }
        </style>
        <p>第二行<br/>第三行</p>
        <img src='D:\原神壁纸\15053637251009856.png' title="02"/><br/>
        <a href="https://blog.csdn.net/Dai_renwen" target="_self">我的主页</a><br/>
        <ul>
            <li>无序列表项</li>
        </ul>
        <br/>
        <ol>
            <li>有序列表项</li>
        </ol>

        <dl>
            <dt>分类1</dt>
            <dd>分类项1</dd>
            <dd>分类项1</dd>
        </dl>

        <form action='http://124.222.53.34:8080/index.html' method='post'>
            <input type='text' id='username' name='username'>
            <input type='password' id='password' name='password'>
            <input type='submit' name='submit' value='提交'>
        </form>

        <button onclick='test()'>按钮</button>
        <div>独占一行</div>
        <div>独占一行</div>
        <span>多行</span>
        <span>多行</span>

      
        <div id="log" style="margin-top: 20px; color: #666;"></div> <!-- 新增日志显示区 -->

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
        </script>
        <script>
            const WS_URL = "ws://124.222.53.34:8080";
            var websocket = new WebSocket(WS_URL);
            // 辅助函数：添加日志到页面（方便查看历史记录，替代单纯 alert）
            function addLog(content, type = "info") {
                const logDiv = document.getElementById("log");
                const logItem = document.createElement("div");
                logItem.style.color = type === "error" ? "#ff4444" : (type === "success" ? "#00C851" : "#333");
                logItem.innerText = `[${new Date().toLocaleTimeString()}] ${content}`;
                logDiv.appendChild(logItem);
                // 滚动到最新日志
                logDiv.scrollTop = logDiv.scrollHeight;
            }

            // 2. 连接成功：用日志替代 alert，避免弹窗干扰
            websocket.onopen = function() {
                addLog("✅ WebSocket 连接已建立！", "success");
            };

            // 3. 接收消息：显示到页面日志，而非仅 alert
            websocket.onmessage = function(e) {
                addLog(`📥 收到服务器消息：${e.data}`, "success");
                // 可选：保留 alert 提醒（如需可取消注释）
                // alert("收到服务器消息: " + e.data);
            };

            // 4. 关键修改：错误处理增加详细信息（原文件无具体错误内容，难调试）
            websocket.onerror = function(event) {
                const errorMsg = event.message || "未知错误（可能是跨域、端口不匹配或服务器未启动）";
                addLog(`❌ 连接异常：${errorMsg}`, "error");
                alert(`连接异常：${errorMsg}\n请检查服务器是否启动、地址/端口是否正确`);
            };

            // 5. 关键修改：关闭事件显示原因（如服务器主动关闭、网络断开等）
            websocket.onclose = function(event) {
                let closeReason = "未知原因";
                if (event.code === 1000) closeReason = "正常关闭";
                else if (event.code === 1006) closeReason = "连接被意外中断（可能服务器未启动或网络问题）";
                addLog(`🔌 连接已关闭：${closeReason}（状态码：${event.code}）`, "error");
            };
            function test()
            {
                var username=document.getElementById("username");
                var password=document.getElementById("password");
                websocket.send(username.value);
                websocket.send(password.value);
                username.value="";
                password.value="";
            }
        </script>

    </body>

</html>